// 待办列表
<template>
    <f7-page
        class="hntList"
        ptr
        @ptr:refresh="refresh"
        infinite
        :infinite-distance="50"
        :infinite-preloader="true"
        @infinite="infinite"
    >
        <f7-navbar>
            <f7-nav-left>
                <f7-link back icon-material="chevron_left" force></f7-link>
            </f7-nav-left>
            <f7-nav-title>待办列表</f7-nav-title>
            <f7-nav-right>
                <!-- <f7-icon f7="house" @click.native="fnToHome()"></f7-icon> -->
            </f7-nav-right>
        </f7-navbar>
        <div class="search-box">
            <qm-classified-retrieval
                :options="options"
                @search="searchItem"
                placeholder="请输入标题"
                :timeIndex="1"
            ></qm-classified-retrieval>
        </div>
        <f7-list media-list class="search-list" v-if="query.data.length > 0">
            <!-- <li v-for="(item, index) in query.data" :key="index" @click="goTodo(item)"> -->
            <li v-for="(item, index) in query.data" :key="index" @click="goTodo(item)">
                <!-- tag-yellow tag-green -->
                <div class="content">
                    <div class="content-top">
                        <div>
                            <span
                                class="tag"
                                :class="tags(item.taskName || item.TASKNAME)"
                                >{{ item.taskName || item.TASKNAME }}</span
                            >
                            <span class="code">{{
                                item.appName || item.APPNAME
                            }}</span>
                        </div>
                        <span class="time">{{
                            getCommentTime(item.startTime || item.STARTTIME)
                        }}</span>
                    </div>
                    <div class="content-bottom text-overflow-one">
                        {{ item.instanceTitle || item.INSTANCETITLE }}
                    </div>
                </div>
            </li>
        </f7-list>
        <f7-list class="search-list" v-else>
            <v-empty description="暂无待办数据" />
        </f7-list>
    </f7-page>
</template>

<script>
import controller from '@/libs/framework/controller'
export default class instance extends controller {
    onBeforeInit() {
        this.urls = {
            query: '/workflow/toDoListExt/query',
        }
    }
    onAfterQuery(type, isSuccess, result) {
        return result
    }
    mixin() {
        return {
            data() {
                return {
                    search: {
                        instanceTitle: '',
                        client: 'app',
                    },
                    query: {
                        data: [],
                    },
                    options: [{ text: '事项标题', value: 0 }],
                }
            },
            watch: {},
            methods: {
                tags(val) {
                    let v = []
                    if (val == '拆卸') {
                        v.push('tag-yellow')
                    } else if (val == '检测') {
                        v.push('tag-green')
                    }
                    return v
                },
                searchItem(value) {
                    this.super.setSearch('instanceTitle', value, 'list')
                    this.super.searchQuery()
                },
                showTime1(date) {
                    return formatter.formatDate(date, 'yyyy-MM-dd hh:mm')
                },
                /**
                 * 人性化时间
                 * @param {String} createTime
                    */
                getCommentTime(createTime) {
                    let serverTime=new Date().getTime()
                    createTime=new Date(createTime).getTime()
                    const interval = (serverTime - createTime) / 1000
                    if (interval < 60) {
                    return '刚刚'
                    } else if (interval < 60 * 60) {
                    let tempTime = Math.floor(interval / 60)
                    return `${tempTime}分钟前`
                    } else if (interval < 60 * 60 * 24) {
                    let tempTime = Math.floor(interval / (60 * 60))
                    return `${tempTime}小时前`
                    } 
                    // else if (interval < 60 * 60 * 24 * 7) {
                    // let tempTime = Math.floor(interval / (60 * 60 * 24))
                    // return `${tempTime}天前`
                    // } 
                    else if (interval < 60 * 60 * 24 * 365) {
                    return formatter.formatDate(new Date(createTime),'MM-dd')
                    } else {
                    return formatter.formatDate(new Date(createTime),'yyyy-MM-dd')
                    }
                },
                //详情
                goTodo(item) {
                    if (item.aspType == 'WORKFLOW') {
                        this.getWorkflowArgs({
                            formId: item.formId,
                        }).then((rlt) => {
                            let url = ''
                            if (rlt.taskId) {
                                url = `${
                                    rlt.mobileFormUrl
                                }?action=processEdit&taskId=${
                                    rlt.taskId
                                }&assigneeId=${rlt.assigneeId}&appCode=${
                                    rlt.appCode
                                }&formId=${
                                    item.formId
                                }&version=${
                                    rlt.version
                                }&_r=${new Date().getTime()}`
                            } else if (rlt.historyTaskId) {
                                url = `${
                                    rlt.mobileFormUrl
                                }?action=processView&historyTaskId=${
                                    rlt.historyTaskId
                                }&formId=${
                                    item.formId
                                }&appCode=${rlt.appCode}&version=${
                                    rlt.version
                                }&_r=${new Date().getTime()}&assigneeId=${
                                    rlt.assigneeId
                                }`
                            } else {
                                this.$toast('无法获取应用的处理地址')
                            }
                            if (url) {
                                this.$f7router.navigate(url)
                            }
                        })
                    } else {
                        let url=item.appEditUrl
                        if(item.thirdParams){
                            const params=JSON.parse(item.thirdParams)
                            let paramStr = [];
                            for (let key in params) {
                                paramStr.push(`${key}=${params[key]}`);
                            }
                            paramStr = paramStr.join("&");
                            url=url+`?${paramStr}`
                        }
                        this.$f7router.navigate(url)
                    }
                },
            },
            mounted() {},
            computed: {},
        }
    }
}
</script>

<style lang="less" scoped>
@deep: ~'>>>';

.hntList {
    @{deep} .tabs .page-content {
        padding-top: 90px;
    }

    .search-box {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f0f2f5;
        position: fixed;
        width: 100%;
        height: 51px;
        z-index: 99;

        @{deep}.searchbar {
            flex: 1;
            font-size: 16px;
            height: 35px;
            border-radius: 35px;
            overflow: hidden;
            margin-left: 16px;

            input[type='search'] {
                font-size: 16px;
                padding-left: 50px;
            }
        }

        > span {
            flex-shrink: 0;
            padding: 10px;
            width: 17px;
            height: 17px;
            background: url('../../../assets/img/search.png') no-repeat center /
                17px;
        }
    }

    .search-list {
        margin: 65px 16px 16px;
        background: #fff;
        border-radius: 4px;

        @{deep}ul {
            background: none;
            margin: 0;
            padding: 0 18px;
        }

        li {
            border-bottom: 1px solid #e9edf7;
            padding: 15px 0;
            font-size: 13px;
            color: #8995ac;
            font-weight: 400;

            &:last-child {
                border-bottom: none;
            }

            .content {
                .content-top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 6px;

                    .tag {
                        border-color: #1990ff;
                        color: #1990ff;
                    }

                    .tag-yellow {
                        border-color: #ff9534;
                        color: #ff9534;
                    }

                    .tag-green {
                        border-color: #25c670;
                        color: #25c670;
                    }

                    .code {
                        font-size: 16px;
                        font-weight: 500;
                        color: #242424;
                        margin-left: 5px;
                    }

                    .time {
                        font-size: 12px;
                        color: #909db6;
                    }
                }
            }
        }
    }
}
</style>
